<template>
  <div>
    <div v-if="!$route.params.clusterId" style="display: flex; align-items: center; margin-bottom: 16px;">
      <a-space>
        <a-dropdown>
          <template #overlay>
            <a-menu @click="handleMenuClick">
              <a-menu-item key="1">列表图</a-menu-item>
              <a-menu-item key="2">拓扑图</a-menu-item>
            </a-menu>
          </template>
          <a-button>
            视角切换
            <DownOutlined/>
          </a-button>
        </a-dropdown>
      </a-space>
    </div>
    <div class="multi-container">
      <!-- 如果有子路由，则显示子路由内容，否则显示集群列表 -->
      <router-view v-if="$route.params.clusterId"></router-view>
      <div v-else>
        <!-- 原有内容 - 集群列表 -->
        <MultiCluster clusterType="core"/>
        <MultiCluster clusterType="edge"/>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router';
import MultiCluster from '@/components/cluster/MultiCluster.vue';
import { DownOutlined } from '@ant-design/icons-vue';
import type { MenuProps } from 'ant-design-vue';
import router from "@/router";


const route = useRoute();

const handleMenuClick: MenuProps['onClick'] = e => {
  console.log('click', e);
  if (e.key === "1") {
    // 集群列表 - 跳转到当前页面
    router.push({ name: 'cluster' });
  } else if (e.key === "2") {
    // 集群拓扑 - 跳转到新页面
    router.push('/cluster-topology');
  }
};

</script>

<style scoped>
.multi-container {
  width: 100%;
  min-height: 100%;
}
</style>
